let request = new XMLHttpRequest();
let json;
request.open("get", "../json/log.json");
request.send(null);
request.onload = () => {
    if (request.status == 200) {
        json = JSON.parse(request.responseText); //{name: 'zzw', map: '困难', velocity: '困难', fraction: '1'}
        for (let i = 0; i < json.length; i++) {
            for (let j = 0; j < json.length - i - 1; j++) {
                if (json[j].fraction / 1 < json[j + 1].fraction / 1) {
                    let a = json[j];
                    json[j] = json[j + 1];
                    json[j + 1] = a;
                }
            }
        }
        let tbody = document.querySelector("tbody");
        let mapDiv = document.querySelectorAll(".sift>div")[2].querySelectorAll("span");
        let velocityDiv = document.querySelectorAll(".sift>div")[3].querySelectorAll("span");
        let button = document.querySelector("#button");
        let mapFlag = undefined;
        let velocityFlag = undefined;
        let nameFlag = "";

        drawFn = () => {
            var a = 0;
            return json
                .map((item) => {
                    if (mapFlag === undefined ? true : item.map == mapFlag) {
                        if (velocityFlag === undefined ? true : item.velocity == velocityFlag) {
                            if (nameFlag === "" ? true : item.name == nameFlag) {
                                return `
                                <tr>
                                <td>${++a}</td>
                                <td>${item.name}</td>
                                <td>${item.map}</td>
                                <td>${item.velocity}</td>
                                <td>${item.fraction}</td>
                                </tr>
                                `;
                            }
                        }
                    }
                })
                .join("");
        };

        let drawHTML = () => {
            tbody.innerHTML = `
                <tr>
                <td>排名</td>
                <td>姓名</td>
                <td>地图</td>
                <td>速度</td>
                <td>分数</td>
                </tr>
        ${drawFn()}
        `;
        };
        drawHTML();
        mapDiv[0].onclick = () => {
            let on = document.querySelectorAll(".sift>div")[2].querySelector(".on");
            on.classList.remove("on");
            mapDiv[0].classList.add("on");
            mapFlag = "普通";
        };
        mapDiv[1].onclick = () => {
            let on = document.querySelectorAll(".sift>div")[2].querySelector(".on");
            on.classList.remove("on");
            mapDiv[1].classList.add("on");
            mapFlag = "困难";
        };
        mapDiv[2].onclick = () => {
            let on = document.querySelectorAll(".sift>div")[2].querySelector(".on");
            on.classList.remove("on");
            mapDiv[2].classList.add("on");
            mapFlag = "无边框";
        };
        mapDiv[3].onclick = () => {
            let on = document.querySelectorAll(".sift>div")[2].querySelector(".on");
            on.classList.remove("on");
            mapDiv[3].classList.add("on");
            mapFlag = undefined;
        };
        velocityDiv[0].onclick = () => {
            let on = document.querySelectorAll(".sift>div")[3].querySelector(".on");
            on.classList.remove("on");
            velocityDiv[0].classList.add("on");
            velocityFlag = "简单";
        };
        velocityDiv[1].onclick = () => {
            let on = document.querySelectorAll(".sift>div")[3].querySelector(".on");
            on.classList.remove("on");
            velocityDiv[1].classList.add("on");
            velocityFlag = "普通";
        };
        velocityDiv[2].onclick = () => {
            let on = document.querySelectorAll(".sift>div")[3].querySelector(".on");
            on.classList.remove("on");
            velocityDiv[2].classList.add("on");
            velocityFlag = "困难";
        };
        velocityDiv[3].onclick = () => {
            let on = document.querySelectorAll(".sift>div")[3].querySelector(".on");
            on.classList.remove("on");
            velocityDiv[3].classList.add("on");
            velocityFlag = "地狱";
        };
        velocityDiv[4].onclick = () => {
            let on = document.querySelectorAll(".sift>div")[3].querySelector(".on");
            on.classList.remove("on");
            velocityDiv[4].classList.add("on");
            velocityFlag = undefined;
        };
        button.onclick = () => {
            let name = document.querySelector("#name");
            nameFlag = name.value;
            drawHTML();
        };
    }
};
